<style>
    #add-manager-content .card{
        margin-top:20px;
    }
    .form-tips{
        font-size:0.7em;
    }
    .state-init{
        display:none;
    }
    .state-error{
        display: block;
        color:red;
    }
</style>
<div id="add-manager-content" class="container animated fadeIn">
    <div class="row">

        <div class="center-block col-sm-8">

            <div class="card">
                <div class="card-header">
                    <i class="fa fa-user-plus fa-lg"></i>
                    <strong> باشقۇرغۇچى قوشۇش </strong>
                    <div class="card-actions">
                        <a href="#" class="btn-close"><i class="icon-close"></i></a>
                    </div>
                </div>
                <div class="card-block">
                    <form role="form" class="add-mgr-form">
                        <div class="form-group">
                            <label> نامى </label>
                            <input type="text" class="form-control" onkeyup="goValidate(this);" name="mName" placeholder="">
                            <span class="form-tips state-init">ئىناۋەتلىك نام كىرگۈزۈڭ</span>
                        </div>

                        <div class="form-group">
                            <label> تىلفۇن نۇمۇرى </label>
                            <input type="number" class="form-control" onchange="goValidate(this);" name="mTel" placeholder="11 خانە رەقەم كىرگۈزۈڭ ">
                            <span class="form-tips state-init">ئىناۋەتلىك تېلفۇن نۇمۇرى كىرگۈزۈۈڭ</span>
                        </div>

                        <div class="form-group">
                            <label> ئېلخەت ساندۇقى </label>
                            <input type="email" class="form-control" onchange="goValidate(this);" name="mEmail" placeholder="">
                            <span class="form-tips state-init">ئىناۋەتلىك ئېلخەت ئاددىرىس كىرگۈزۈڭ</span>
                        </div>

                        <!-- Location -->
                        <div class="form-group col-sm-6">
                            <label> ۋىلايەت </label>
                            <select name="sel-cities" class="form-control" size="1" onchange="selCiChanged(this);">
                                <option value="">--- تاللاڭ ---</option>
                            </select>
                            <span class="form-tips state-init"> ۋىلايەتنى تاللاڭ</span>
                        </div>
                        <div class="form-group col-sm-6">
                            <label> ناھىيە </label>
                            <select name="sel-districts" class="form-control" size="1" onclick="goValidate(this);">

                            </select>
                            <span class="form-tips state-init">ناھىيەنى جەزىملەشتۈرۈڭ</span>
                        </div>
                        <div class="form-group">
                            <label> رايون / يىزا-بازار </label>
                            <input type="text" class="form-control" name="mVillage" placeholder="">
                            <span class="form-tips state-init"></span>
                        </div>



                        <div class="form-group">
                            <label> شىفىرى </label>
                            <input type="text" class="form-control" name="mPwd" value="123456" placeholder="123456" disabled>
                            <span class="form-tips state-init"></span>
                        </div>

                        <div class="form-group">
                            <label> ھوقۇقى </label>
                            <select name="mRole" class="form-control" size="1" onclick="goValidate(this);">
                                <option value="">--- تاللاڭ ---</option>
                                <option value="root"> خوجىدار (تولۇق ھوقۇق) </option>
                                <option value="storeman"> ئامبارچى </option>
                                <option value="accountant"> بوغالتىر </option>
                                <option value="customer"> خېرىدار </option>
                            </select>
                            <span class="form-tips state-init">باشقۇرغۇچى ھوقۇقىنى تاللاڭ</span>
                        </div>
                    </form>
                </div>
                <div class="card-footer">
                    <button type="submit" href="#" onclick="addMgrClicked();" class="btn btn-primary"><i class="fa fa-check-square-o"></i> تاپشۇرۇش </button>
                    <button type="reset" class="btn btn-danger" onclick="resetMgrFormClicked();"><i class="fa fa-ban"></i> ئەسلىگە قايتۇرۇش </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {

        loadCities();

    });

    function loadCities() {
        var selectorCi = $("select[name='sel-cities']");
        net.get('region/cities',null,function (error) {

        },function (response) {
            $.each(response.data,function (index,value) {
                $(selectorCi).append("<option value='"+value.id+"'>"+value.ugName+"   "+value.chName+"</option>");
            });
        });
    }

    function selCiChanged(selector) {
        var cityId = $(selector).val();
        var selectorDi = $("select[name='sel-districts']");
        //清空次级菜单
        $(selectorDi).empty();

        if(cityId == ''){
            //
            $(selector).next().removeClass('state-init').addClass('state-error')
        }else{
            $(selector).next().removeClass('state-error').addClass('state-init');

            net.get('region/districts',{'cityId':cityId},function (error) {

            },function (response) {
                $.each(response.data,function (index,value) {
                    $(selectorDi).append("<option value='"+value.id+"'>"+value.ugName+"   "+value.chName+"</option>");
                });
                //第一次提示改变次级菜单
                $(selectorDi).next().removeClass('state-init').addClass('state-error');
            });
        }

    }
    
    function goValidate(x) {
        //特殊字符正则
        var containSpecial = RegExp(/[(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);

        //mName验证
        if(x.name == "mName") {
            if (containSpecial.test(x.value)) {
                $(x).next().removeClass('state-init').addClass('state-error');
            }else{
                $(x).next().removeClass('state-error').addClass('state-init');
            }
            return;
        }

        //mTel验证
        if(x.name == "mTel") {
            //手机号验证正则
            var telReg = RegExp(/^1[234578]\d{9}$/);

            if (!telReg.test(x.value)) {
                $(x).next().removeClass('state-init').addClass('state-error');
            }else{
                $(x).next().removeClass('state-error').addClass('state-init');
            }
            return;
        }

        //mEmail验证
        if(x.name == "mEmail") {
            //e-mail验证正则
            var emailReg = RegExp(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/);

            if (!emailReg.test(x.value)) {
                $(x).next().removeClass('state-init').addClass('state-error');
            }else{
                $(x).next().removeClass('state-error').addClass('state-init');
            }
            return;
        }


        if(x.name == "sel-districts") {
            //判断父级菜单
            var selectorCi = $("select[name='sel-cities']");
            if(selectorCi.val() == ''){
                selectorCi.next().removeClass('state-init').addClass('state-error');
            }else{
                selectorCi.next().removeClass('state-error').addClass('state-init');
            }

            //判断次级菜单
            if (x.value == "") {
                $(x).next().removeClass('state-init').addClass('state-error');
            }else{
                $(x).next().removeClass('state-error').addClass('state-init');
            }
            return;
        }

        //mRole验证
        if(x.name == "mRole") {
            if (x.value == "") {
                $(x).next().removeClass('state-init').addClass('state-error');
            }else{
                $(x).next().removeClass('state-error').addClass('state-init');
            }
            return;
        }

    }

    function addMgrClicked() {

        if(!isFormValid()){
            console.log("form not valid...don't submit.");
            dia.alert('تەكشۈرۈڭ','جەدۋەل توشقۇزىشىڭىز توغرا بولمىدى ! قىزىل رەڭلىك ئەسكەرتىشكە دىققەت قىلىڭ! ',['بىلدىم'],'fa fa-times-circle-o',function () {
                
            });
            return ;
        }else{
            var serializeArr = $(".add-mgr-form").serializeArray();
            var Obj = arr2Json(serializeArr);
            console.log("---------debug----",Obj);

            net.post("manager/add",Obj,function (error) {

            },function (response) {
                dia.alert('ئەسكەرتىش','بىر باشقۇرغۇچى قوشۇلدى!',['بىلدىم'],'fa fa-check',function (btn_name) {
                    resetMgrFormClicked();
                });
            });
        }

    }

    function isFormValid() {
        var valid = true;

        $(".add-mgr-form .form-tips").each(function () {
            if($(this).hasClass("state-error")){
                console.log("error location:",$(this)[0].previousElementSibling.tagName,$(this)[0].previousElementSibling.name);
                valid = false;
                return false;
            }
        });

        if(valid == false){return false}

        $(".add-mgr-form input").each(function () {
           if($(this).val() == "" || $(this).val() == "undefined"){
               console.log("null value location:",$(this)[0].name);
               var input_name = $(this)[0].name;
               $("input[name='"+input_name+"']").next().removeClass("state-init").addClass("state-error");
               valid = false;
               return false;
           }
        });

        if(valid == false){return false}

        $(".add-mgr-form select").each(function () {
            if($(this).val() == "" || $(this).val() == "undefined"){
                console.log("null value location:",$(this)[0].name);
                var select_name = $(this)[0].name;
                $("select[name='"+select_name+"']").next().removeClass("state-init").addClass("state-error");
                valid = false;
                return false;
            }
        });

        return valid;
    }

    function arr2Json(arr){
        var obj = {};
        $(arr).each(function(){
            obj[this.name]=this.value;
        });

        var mDistrict = {
            id:obj['sel-districts'],
            city :{
                id :obj['sel-cities']
            }
        };

        obj['mDistrict'] = mDistrict;

        return obj;
    }
    
    function resetMgrFormClicked() {
        $('.add-mgr-form input').val("");
        $('.add-mgr-form select').val("");
        $('.add-mgr-form .form-tips').removeClass('state-error').addClass('state-init');
    }
</script>